<template>
  <div class="container">
    <!-- 导航栏 -->
    <van-nav-bar
      class="page-nav-bar"
      left-arrow
      :title="'共有'+total+'条回复'"
      @click-left="$emit('return')"
    ></van-nav-bar>
    <!-- /导航栏 -->
    <comment-item :data="data"></comment-item>
    <van-cell title="全部评论"></van-cell>
    <comment-list
      @comment="total=$event.total_count"
      :needId="data.com_id"
      type="c"
      :list="list"
    ></comment-list>
    <div class="reply">
      <van-button
        round
        @click="commentShow=true"
      >写评论</van-button>
    </div>
    <!-- 写评论弹出层 -->
    <van-popup
      @close="message=''"
      v-model="commentShow"
      close-icon-position="top-left"
      position="bottom"
      style=" height: 18%;padding-top:5px"
    >
      <van-cell>
        <van-field
          style="background: rgb(250, 250, 250);"
          v-model.trim="message"
          rows="2"
          autosize
          type="textarea"
          maxlength="50"
          placeholder="请输入评论"
          show-word-limit
          slot="title"
        />
        <van-button
          :disabled="!message"
          @click="addComment"
          type="info"
          style="margin-top:20px"
        >发送</van-button>
      </van-cell>

    </van-popup>
  </div>
</template>

<script>
import commentItem from '@/components/comment-item'
import commentList from '@/views/article/components/comment-list.vue'
import { addComments } from '@/api/comment.js'

export default {
  props: {
    data: {
      type: Object,
      required: true
    },
    art_id: {
      required: true
    }
  },
  created () {
  },
  data () {
    return {
      list: [],
      commentShow: false,
      message: '',
      total: 0
    }
  },
  components: {
    commentItem,
    commentList
  },
  methods: {
    async addComment () {
      this.$toast.loading({
        message: '发布中...',
        forbidClick: true
      })
      try {
        const { data: res } = await addComments({
          target: this.data.com_id.toString(),
          content: this.message,
          art_id: this.art_id.toString()
        })
        this.message = ''
        this.commentShow = false
        this.total++
        this.list.unshift(res.data.new_obj)
        this.$toast.success('发表成功')
      } catch (err) {
        this.$toast.fail('发布失败')
      }
    }
  }
}
</script>

 <style lang="less" scoped>
.container {
  padding-bottom: 100px;
  .reply {
    border-top: 1px solid #b1abab;
    width: 100%;
    height: 100px;
    background: rgb(255, 255, 255);
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    button {
      border: 1px solid #b1abab;
      width: 300px;
      height: 60px;
    }
  }
  .van-cell__value {
    display: flex;
    flex: 0.2;
    button {
      flex: 1;
      background: none;
      border: none;
      color: rgb(82, 197, 247);
      white-space: nowrap;
    }
  }
}
</style>
